<script setup lang="ts">
  import { Button } from '@renderer/components/ui/button'
  import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle
  } from '@renderer/components/ui/card'
  import { Input } from '@renderer/components/ui/input'
  import { Label } from '@renderer/components/ui/label'
  import { useI18n } from 'vue-i18n'

  const { t } = useI18n()
</script>

<template>
  <Card class="mx-auto max-w-sm text-app">
    <CardHeader>
      <CardTitle class="text-2xl"> {{ t('login-form.title') }} </CardTitle>
      <CardDescription> {{ t('login-form.description') }} </CardDescription>
    </CardHeader>
    <CardContent>
      <div class="gap-4 grid">
        <div class="gap-2 grid">
          <Label for="email"> {{ t('login-form.email') }} </Label>
          <Input id="email" type="email" placeholder="m@example.com" required />
        </div>
        <div class="gap-2 grid">
          <div class="flex items-center">
            <Label for="password"> {{ t('login-form.password') }} </Label>
          </div>
          <Input id="password" type="password" required />
          <a href="#" class="text-sm ml-auto underline inline-block">
            {{ t('login-form.forgot-password') }}
          </a>
        </div>
        <Button type="submit" class="w-full"> {{ t('login-form.login-btn') }} </Button>
      </div>
      <div class="text-sm mt-4 text-center">
        {{ t('login-form.no-account') }}
        <a href="#" class="underline"> {{ t('login-form.sign-up') }} </a>
      </div>
    </CardContent>
  </Card>
</template>
